<!DOCTYPE html>
<html>
<head>
    <title>支付界面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/pay.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script src="/js/plugins/mdialog/mDialog.js"></script>
    <link rel="stylesheet" href="/css/dialog.css"/>
    <script>
    </script>
</head>
<body background="/upload/15.jpg"></body>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/mine/myList.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>结算界面</span>
        </div>
        <div class="col">
            <a href="store.html"> <i class="fa fa-shopping-bag" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="myList.html"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="spdd.html"> <i class="fa fa-file-text" aria-hidden="true"></i></a>
        </div>
    </div>
</div>


<div class="body">


    <div class="address" id="address2">
        <img src="/upload/54.jpg" alt="" style="width: 60px;display: inline-block" />
        <a href="https://map.baidu.com/@12609384.2,2631450.58,12z" style="background-color: red">
            <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
                定位
            </button>
        </a>
    </div>




    <div class="hbt" style="width: 100%;height: 1rem;background-color: #eaeaea"></div>
    <div class="smaller">
        <h6 class="module-title">商品</h6>
        <div render-loop="list">
            <div style="margin-bottom: 20px">
                <!--<a render-fun="getHref" render-key="list.id" data-url="/mine/commodity.html?id=">-->
                <div class="row news-detail">
                    <div class="col-4">
                        <img render-src="list.store.picture" style="height: 90px">
                    </div>
                    <li class="li4">
                        <span render-html="list.store.diseribe"></span>&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-close" aria-hidden="true"></i>&nbsp;
                        <span id="input" render-key="list.number" render-fun="getCount"></span>
                        <br/>
                        需要的总积分:<span class="totalCount" render-key="list.store.price" render-fun="getIntegral"></span>
                        </span><br>
                        寄送方式:<span render-html="list.store.mail"></span>
                        </span><br>
                        <button style="background-color: red" class="delete" >撤销</button>
                        <input type="hidden" id="storeId" class="storeId" render-value="list.store.id"></input>
                        <input type="hidden" id="storeId1" class="storeId1" render-value="list.id"></input>
                    </li>
                </div>
                <!-- </a>-->
                <hr>
            </div>
        </div>
    </div>

    <div class="row  input-group">
        <div class="col-6">
            <span class="input-group-addon" ></span>
            <input type="text" class="form-control" placeholder="请输入姓名" aria-describedby="basic-addon1" id="name" >
        </div>
        <div class="col-6">
            <span class="input-group-addon" ></span>
            <input type="text" class="form-control" placeholder="请输入联系方式" aria-describedby="basic-addon1" id="tel" >
        </div>
    </div>

        <div class="row  input-group">
            <div class="col-6">
                <span class="input-group-addon" ></span>
                <input type="text" class="form-control" placeholder="请输入地址" aria-describedby="basic-addon1" id="place" >
            </div>
            <div class="col-6">
            <span class="input-group-addon" ></span>
            <input type="text" class="form-control" placeholder="请输入留言" aria-describedby="basic-addon1" id="remarks" >
            </div>
        </div>

    <div class="zjfy">
        <div class="fy">
            <p><span style="color: #000000">合计：</span><span id="pay"></span>分</p>
            <p><span style="color: #000000">剩余：</span><span id="count"></span>分</p>
        </div>
        <div class="qxdd">
            <div style="width:11rem;margin:0 auto">
                <a id="subBtn">
                    <button type="button">立即购买</button>
                </a>
            </div>
        </div>
    </div>

    <div class="wx_nav" id="wx_nav">
        <a href="store.html" class="nav_index" id="nav_index">首页</a>
        <a href="myList.html" class="nav_shopcart" id="nav_shopcart">购物车</a>
        <a href="spdd.html" class="nav_me on" id="nav_me on">订单</a>
    </div>
</div>
<div class="theme-popover-mask"></div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form action="/usergoods/checkpassword" method="post">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"></span>
                        <input type="text" class="form-control" id="password" placeholder="请输入密码" aria-describedby="basic-addon1">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="checkpassword">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
<script>

    jQuery.ajaxSettings.traditional = true;
    //购买的数量
    var count;
    var usergoods;
    //
    //去查询出用户已加入购物车的商品
    $.get(baseUrl+"/usergoods/"+user.id,{state:1},function (data) {
        $(".smaller").renderValues({list:data},{
            getCount : function (item, value) {
                count=value;
                $(item).html(value);
            },
            getIntegral: function (item,value) {
                //计算每件商品的总价
                $(item).html(value*count);
            }
        });
        //用来存储总积分
        var totalCount = 0;
        var num = $(".totalCount");
        //循环数组里的价格
        $.each(num,function (index, ele) {
            //循环的同时将每个商品的价格相加放入totalCount
            totalCount += parseInt($(ele).html()) ;
        });
        //将价钱设置到总金额里
        $("#pay").html(totalCount);
        //获取所有商品的id
        var arrays=new Array();
        var ids=$(".storeId");
        $.each(ids,function (index,ele) {
            arrays.push($(ele).val());
        })
        console.log(arrays);


        //购买
       $("#subBtn").click(function () {
           //回显积分
           $.get(baseUrl+"/integrals",{userId:user.id},function (data) {
               var integral=totalCount;
               console.log(data.integral);
               if (totalCount>data.integral) {
                  $(document).dialog({
                      content: '积分不足',
                  });
                   return;
               }
               else{
                   Dialog.init('<input  type="text" placeholder="请输入密码" id="password" style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                       title: '请输入你的密码',
                       button: {

                           确定: function () {
                               var password=this.querySelector('input').value;
                               $.get(baseUrl+"/usergoods/password",{password:password,uid:user.id},function (data) {
                                   if (data.success){
                                       $.ajax({
                                           url:baseUrl+'/usergoods/'+user.id,
                                           method:'put',
                                           data:{
                                               arrays:arrays,
                                               state:2,
                                               name:$("#name").val(),
                                               tel:$("#tel").val(),
                                               place:$("#place").val(),
                                               remarks:$("#remarks").val(),
                                               integral:integral,
                                           },
                                           success:function (data) {
                                               if (data.success) {
                                                   $(document).dialog({
                                                       content: '购买成功',
                                                   });
                                                   setTimeout(function () {
                                                       window.location.reload();
                                                   }, 2000);
                                               }else{
                                                   $(document).dialog({
                                                       content:data.errorMsg,
                                                   });
                                               }
                                           }
                                       })
                                   }else{
                                       $(document).dialog({
                                           content: data.errorMsg,
                                       });
                                   }
                               })

                           },
                           关闭: function () {
                               Dialog.close(this);
                           }
                       }
                   });


               }
           })


       })


        //回显积分
        $.get(baseUrl+"/integrals",{userId:user.id},function (data) {
            $("#count").html(data.integral)
        });

        //当点击撤销的时候
        $(".delete").click(function () {
            var id=$(this).siblings(".storeId1").val();
            $.ajax({
                url:baseUrl+'/usergoods/'+id,
                method:'delete',
                success:function () {
                    $(document).dialog({
                        autoClose: 2000,
                        content: '撤销成功了',
                    });
                    setTimeout(function () {
                        window.location.reload();
                    },1500)
                }
            })
        })
    })
</script>

</html>
